<template>
	<van-search v-model="value"  show-left
	 shape="round" background="#87CEEB " 
	 placeholder="请输入搜索关键词" 
	   @search="onSearch"
	   to="/search">
	   <template #left>
	        <div >
	   	<van-icon name="wap-nav" @click="showPopup" size="30"/>
	   	<van-popup v-model:show="show" position="left" :style="{height: '100%' ,width:'80%' }" >
	   		<div>
	   		<van-sticky :offset-top="10">
	   		<van-nav-bar
	   		  :border="false"
	   		  title="盐酱板鸭真好吃"
	   		  @click-left="onClickLeft"
	   		  @click-right="onClickRight"
	   		>
	   		 <template #right>
	   		    <van-icon name="scan" size="25" />
	   		  </template>
	   		  <template #left>
	   		    <van-image
	   			  round
	   		      width="45"
	   		      height="45"
	   		      src="https://unpkg.com/@vant/assets/cat.jpeg"
	   		    />
	   		   </template>
	   		</van-nav-bar>
	   		</van-sticky>
	   		</div>
	   		<div class="block1">
	   			
	   		</div>
	   		<div class="block2">
	   			
	   		</div>
	   		<van-button type="primary" size="large" is-link to="/login">登录</van-button>
	   	</van-popup>	
	   	 </div>
	     </template>
	</van-search>
	
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const value = ref('')
	const show = ref(false)
	    const showPopup = () => {
	      show.value = true
	    }
	// const onClickLeft = () => history.back();
	// const onClickRight = () => history.back();
</script>

<style>
	.scan-icon{
		font-size: 30px;
	}
	.block1{
		background-color: burlywood;
		height: 100px;
		width: 90%;
		margin: 20px auto;	
	}
	.block2{
		background-color: burlywood;
		height: 100px;
		width: 90%;
		margin: 20px auto;	
	}
</style>